<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li data='cstDuyi'>1</li>
            <li data='Duyi'>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <!-- <div class="wrapper">
        <div class="demo">
            <span>span1</span>
        </div>
        <div class="demo">
            <p>p1</p>
        </div>
        <div class="demo">
            <span>span2</span>
        </div>
    </div> -->
    <!-- <div id='demo'>demo</div> -->
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <!-- <script src='./jquery.js'></script> -->
    <script>
        // css selector
        // 实例方法
        // $('div').css({width: 100, height: 100, backgroundColor: 'red'});


        // css selector
        // $('.wrapper ul li').css({width: 100, height: 100, backgroundColor: 'red'})

        // jquery unique selector
        // $('.wrapper ul li:eq(-1)').css({width: 100, height: 100, backgroundColor: 'orange'});
        // $('li[data="Duyi"]').css({width: 100, height: 100, backgroundColor: 'blue'});



        // null undefined '' 容错机制
       
        // $(null).css({width: 100, height: 100, backgroundColor: 'blue'});
        
        // var colorsArr = ['red', 'blue', 'yellow'];

        // $('.wrapper .demo').each(function (index, ele) {
            // $(ele)
            //     .find('span')
            //     .css({color: colorsArr[index]}); 
        // });

        // dom
        // var oDiv = document.getElementById('demo')
        // // oDiv.css({color: 'red'});
        // $(oDiv).css({color: 'red'});


        // function
        // DOMContentLoaded
        // window.onload = function () {
        //     console.log('window.onload');
        // }

        // $(function () {
        //     console.log('DOMContentLoaded');
        // })
        
        // $(document).ready(function () {
        //     console.log('DOMContentLoaded');
        // })

        // 两个
        // $('ul', '.wrapper');




        // $()  对象?

        // jQuery 库  封闭作用域


        (function () {
            function jQuery (selector) {
                return new jQuery.prototype.init(selector);
            }
            jQuery.prototype.init = function (selector) {
                // this = {};
                // 选出 dom 并且包装成jQuery对象  返回
                // id class
                this.length = 0;
                if (selector.indexOf('.') != -1) {
                    var dom = document.getElementsByClassName( selector.slice(1) );
                }else if (selector.indexOf('#') != -1) {
                    var dom = document.getElementById( selector.slice(1) );
                }

                if (dom.length == undefined) {
                    this[0] = dom;
                    this.length++;
                }else {
                    // 基础铺垫
                    for (var i = 0; i < dom.length; i++) {
                        this[i] = dom[i];
                        this.length++
                    }
                }
                // return this;
            }

            jQuery.prototype.css = function (config) {
                // 循环操作每一个dom
                // 循环操作
                for (var i = 0; i < this.length; i++) {
                    for (var attr in config) {
                        this[i].style[attr] = config[attr];
                    }
                }

                // 链式操作
                return this;
            }

            jQuery.prototype.init.prototype = jQuery.prototype;

            window.$ = window.jQuery = jQuery;
        })();


        $('.demo')
            .css({width: '100px', height: '100px', backgroundColor: 'orange'})
            .css({color: 'red'})
        
    </script>
</body>
</html>